<template>
	<w-layout showNavbar navTitle="银行卡信息绑定" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<up-code
					:seconds="seconds" 
					ref="uCodeRef"
					@change="codeChange"
				></up-code>
				<popup-picker
					:show="TypePicker.show"
					:title="'选择个人证件有效期类型'"
					:list="TypePicker.data"
					:column="1"
					@close="TypePicker.show=false" 
					@left="TypePicker.show=false"
					@right="confirmTypePicker" 
				></popup-picker>
				
				<view class="op-30 my-30 t-c" style="line-height: 1.8;">
					不得填写与本人无关的信息，否则绑卡无法成功
				</view>
				
				<view class="">
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>银行卡号</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<input v-model="formData.card_no" class="color fs-26 flex-1" type="text" placeholder="请输入银行卡开户姓名" />
						</view>
					</view>
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>银行卡开户姓名</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<input v-model="formData.card_name" class="color fs-26 flex-1" type="text" placeholder="请输入银行卡开户姓名" />
						</view>
					</view>
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>银行卡绑定身份证</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<input v-model="formData.cert_no" class="color fs-26 flex-1" type="text" placeholder="请输入银行卡绑定身份证" />
						</view>
					</view>
					<view @click="TypePicker.show = true" class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>个人证件有效期类型</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<view :class="formData.cert_validity_type?'color':''" class="fs-26 flex-1">
								{{ formData.cert_validity_type || '请选择个人证件有效期类型'}}
							</view>
						</view>
					</view>
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>个人证件有效起始日</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<uni-datetime-picker class="color fs-26 flex-1" type="date" :border="false" placeholder="请选择个人证件有效起始日" v-model="formData.cert_begin_date" />
						</view>
					</view>
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>个人证件有效期到期日</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<uni-datetime-picker class="color fs-26 flex-1" type="date" :border="false" placeholder="请选择个人证件有效期到期日" v-model="formData.cert_end_date" />
						</view>
					</view>
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>银行卡绑定手机号</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<input v-model="formData.mobile_no" class="color fs-26 flex-1" type="text" placeholder="请输入银行卡号" />
							<view @tap="getCode" class="ml-20 op-50">
								{{tips}}
							</view>
						</view>
					</view>
					<view class="mb-40">
						<view class="">
							<text class="red mr-10">*</text>
							<text>验证码</text>
						</view>
						<view class="public-input-1 px-30 py-25 mt-20 fr-ac-jsb" style="color: #fff;">
							<input v-model="formData.verify_code" class="color fs-26 flex-1" type="text" placeholder="请输入验证码" />
						</view>
					</view>
					
				</view>
				
				<view class="mt-60">
					<view @click="submit" class="public-btn-3 transition py-25 t-c flex-1">
						<view class="text-color-b fs-32">
							确定
						</view>
					</view>
				</view>
					
				
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import config from '@/common/config'
	import{
		copy
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		real_name,
		send_sms
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.type){
			state.type = options.type
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	
	
	const state = reactive({
		type: 1,
		
	})
	const formData = reactive({
		card_no:'',  //可选
		card_name:'',  //可选
		cert_no:'',  //可选
		cert_validity_type:'',  //可选1:长期有效 0:非长期有效；
		cert_begin_date:'',  //20220905 可选
		cert_end_date:'',  //20220905 可选
		mobile_no:'',  //可选
		
		verify_code: '', //验证码
	})
	
	const TypePicker = reactive({
		show: false,
		data: {
			keyName:'name',
			checkName:'value',
			list: [
				{
					name:'非长期有效',
					value:0
				},
				{
					name:'长期有效',
					value:1
				},
			],
			num:1
		}
	})
	function confirmTypePicker(e){
		console.log(e)
		if(e[0] === undefined){
			return uni.$u.toast('请选择个人证件有效期类型')
		}
		formData.cert_validity_type = e[0]
		TypePicker.show = false
	}
	
	
	//验证码相关
	const tips = ref('');
	const seconds = ref(60);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		tips.value = text;
		console.log(text)
	};
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (uni.$u.test.mobile(formData.mobile)) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
				});
				const res = await send_sms({
					mobile: formData.mobile,
				})
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			} else {
				uni.$u.toast('请先输入正确手机号');
			}
	
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	
	
	async function submit(){
		if(!formData.name){
			return uni.$u.toast('请输入姓名')
		}
		if(!uni.$u.test.idCard(formData.card_num)){
			return uni.$u.toast('请输入正确身份证')
		}
		if(!uni.$u.test.mobile(formData.mobile)){
			return uni.$u.toast('请输入正确手机号')
		}
		if(!formData.code){
			return uni.$u.toast('请输入验证码')
		}
		const res = await real_name({
			...formData
		})
		uni.$u.toast('认证成功！')
		setTimeout(() => {
			uni.navigateBack()
		},1000)
	}
	
	
	
	function checkData(){
		if(!luhnCheck(formData.card_no)){
			return uni.showToast({
				title:'请输入正确银行卡号',
				icon:'none'
			})
		}
		if(!formData.card_name){
			return uni.showToast({
				title:'请输入银行卡开户姓名',
				icon:'none'
			})
		}
		if(!validateIdCard(formData.cert_no)){
			return uni.showToast({
				title:'请输入正确身份证',
				icon:'none'
			})
		}
		if(formData.cert_validity_type === ''){
			return uni.showToast({
				title:'请选择个人证件有效期类型',
				icon:'none'
			})
		}
		if(formData.cert_begin_date == ''){
			return uni.showToast({
				title:'请选择个人证件有效期起始日',
				icon:'none'
			})
		}
		if(formData.cert_validity_type === 0){
			if(formData.cert_end_date == ''){
				return uni.showToast({
					title:'请选择个人证件有效期到期日',
					icon:'none'
				})
			}
		}
		if(!uni.$u.test.mobile(formData.mobile_no)){
			return uni.showToast({
				title:'请输入正确手机号',
				icon:'none'
			})
		}
		return true
	}
	
	//银行卡号码检测
	function luhnCheck(cardNumber) {
	    // 使用正则表达式检查银行卡号
		var regex = /^[0-9]{16,19}$/; // 校验16-19位数字
		return regex.test(cardNumber);
	}
	function validateIdCard(idCard) {
	  const regExp = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}[0-9Xx]$/;
	  return regExp.test(idCard);
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 50rpx 50rpx 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
	
	.red{
		color: red;
	}
	
	// ::v-deep .uni-date__x-input {
	// 	color: #999;
	// }
</style>